import React, { useState } from 'react'
import { Mask, Space } from '@/components/UiComponents';
import { Input, Checkbox, Button, View } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
import { fakeAuthCodePlay } from '@/server/shop'
import { useEffect } from 'react';
import './index.scss'
export default (props) => {
  const { visible = {}, onClose, submit } = props
  const { show = false, detail = {} } = visible
  const { id } = detail

  const [value, setValue] = useState('')
  useEffect(() => {
    if (!show) {
      setValue('')
    }
  }, [show])
  const handleSubmit = () => {
    fakeAuthCodePlay({
      goodsId: id,
      authCode: value
    }).then(val => {
      submit()
    })
  }
  return (
    <Mask
      show={show}
      closeBtn={false}
      onClose={() => onClose()}
    >
      <View className='MaskCode_box'>
        <Space direction='vertical'>
          <View className='MaskCode_title_box'>口令兑换</View>
          <Input className='MaskCode_input' value={value} onInput={(e) => {
            setValue(e.detail.value)
          }}></Input>
          <Button className='MaskCode_button' onClick={() => handleSubmit()}>兑换</Button>
        </Space>

      </View>
    </Mask>
  )
}

